<!-- DirectionalDialog.vue -->
<template>
    <!-- 遮罩层 -->
    <div v-show="visible" :class="['dialog-overlay', visible ? 'show_pop' : 'hidden_pop']"
        :style="{ backgroundColor: overlayColor }" @click="closeOnClickOverlay && handleClose()">
        <!-- 弹框主体 -->
        <div class="dialog-main" :class="[
            `dialog-${direction}`,
            customClass
        ]" :style="mainStyle" @click.stop>
            <!-- 关闭按钮 -->
            <button v-if="showCloseButton" class="dialog-close" @click="handleClose">
                ×
            </button>

            <!-- 内容插槽 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 弹框方向：top/bottom/left/right/center
        direction: {
            type: String,
            default: 'center',
            validator: (val) => ['top', 'bottom', 'left', 'right', 'center'].includes(val)
        },
        // 是否显示
        visible: {
            type: Boolean,
            default: false,
        },
        // 点击遮罩关闭
        closeOnClickOverlay: {
            type: Boolean,
            default: true
        },
        // 显示关闭按钮
        showCloseButton: {
            type: Boolean,
            default: true
        },
        // 遮罩颜色
        overlayColor: {
            type: String,
            default: 'rgba(0, 0, 0, 0.5)'
        },
        // 自定义类名
        customClass: String,
        // 内容宽度/高度（适用于 left/right/top/bottom）
        size: {
            type: String,
            default: ''
        }
    },

    watch: {
        visible(newValue, oldValue) {
            // 处理新值和旧值的逻辑
            console.log("新值:", newValue);
            console.log("旧值:", oldValue);
        },
    },



    computed: {
        mainStyle() {
            const style = {}
            if (['left', 'right'].includes(this.direction)) {
                style.width = this.size
            }
            if (['top', 'bottom'].includes(this.direction)) {
                style.height = this.size
            }
            return style
        }
    },

    methods: {
        handleClose() {
            this.$emit('close')
        }
    }
}
</script>

<style scoped>
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    animation: opacity .5s;
}

/* 基础定位样式 */
.dialog-main {
    position: fixed;
    background: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
}

/* 关闭按钮样式 */
.dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
}

/* 方向定位 */
.dialog-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scaleIn 0.3s;
}

.dialog-top {
    top: 0;
    left: 0;
    right: 0;
    animation: slideDown 0.3s;
}

.dialog-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    animation: slideUp 0.3s;
}

.dialog-left {
    left: 0;
    top: 0;
    bottom: 0;
    animation: slideRight 0.3s;
}

.dialog-right {
    right: 0;
    top: 0;
    bottom: 0;
    animation: slideLeft 0.3s;
}

/* 动画定义 */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideLeft {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes opacity {
    from {
        opacity: 0;

    }

    to {
        opacity: 1;
    }
}
</style>